<template>
    <div id="echarPie">

    </div>
</template>

<script>
    import echarts from "echarts";
    import {reactive, toRefs, onMounted, ref, watch} from "vue";

    export default {
        props: {
            colors: {
                type: Array,
                default: () => ['#39ffdc', '#d3ff68', '#89FFCE', '#FF8C68', '#FFDBEF']
            },
            echarName: {
                type: String,
                default: '访问来源'
            },
            dataSource: {
                type: Array,
                default: () => [
                    {value: 335, name: '直接访问'},
                    {value: 310, name: '邮件营销'},
                    {value: 234, name: '联盟广告'},
                    {value: 135, name: '视频广告'},
                    {value: 1548, name: '搜索引擎'}
                ]
            },
        },
        computed: {
            option() {
                let {dataSource: data, echarName: name, colors} = this;

                return {
                    title: {
                        text: `${name}共计${data.map(item => item.value).reduce((val1, val2) => {
                            return val1 + val2
                        })}`,
                        top: 'center',
                        left: 'center',
                        textStyle: {
                            color: '#fff',
                            fontSize: 10
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        type: 'scroll',
                        textStyle: {
                            color: '#fff'
                        },
                        pageTextStyle:{
                            color: '#fff'
                        },
                        show: true,
                        legendLayout: 'horizontal',
                        left: 'center',
                        top: 'bottom',
                    },
                    series: [
                        {
                            name,
                            type: 'pie',
                            radius: ['50%', '70%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            labelLine: {
                                show: false
                            },
                            data,
                            itemStyle: {
                                //  单独设置每一个饼的颜色
                                normal: {
                                    color: function (params) {
                                        return colors[params.dataIndex] === undefined
                                            ? '#39ffdc'
                                            : colors[params.dataIndex]
                                    }
                                }
                            }
                        }
                    ]
                }
            }
        },
        methods: {
            drawChart() {
                let {option} = this;
                let elementById = document.getElementById("echarPie");
                let pieChart = echarts.init(elementById);
                pieChart.setOption(option);
            }
        },
        mounted() {
            let {drawChart} = this
            drawChart()
        }
    }
</script>

<style scoped>
    #echarPie {
        height: 100%;
        width: 100%;
    }
</style>
